<template>
  <div id="manorfp">  

    <el-form ref="form"  label-width="80px">           
          <el-row>
            <el-col :span="12" >  
                <el-page-header @back="goBack"   :content='this.$route.query.name+"-果种分配"'  style="margin-top:10px;margin-bottom:20px;"></el-page-header>
            </el-col>
          </el-row>
 
        <el-row style="margin-bottom:10px;">  
            <el-col :span="3">
            <el-button type="primary" @click="add_fp_but">果种分配</el-button>
            </el-col>         
        </el-row>

    </el-form>

   <!-- 渲染数据list -->
   <manor-fp-list :data="data"> </manor-fp-list>
   
     <!-- 果种分配 -->
        <el-dialog title="果种分配" :visible.sync="add_fp_mtk"  width="50%">
            <div style="width:100%;"> 

             <el-form ref="form" :model="datalist" label-width="100px" style="width:100%;">
                     <el-form-item label="分配价值">
                        <el-input v-model="datalist.all" placeholder="必填"></el-input>
                    </el-form-item>
                    <el-form-item label="分配范围">
                       <el-select  multiple v-model="datalist.pitch" placeholder="可选择分配范围" @change="select_change" style="width:100%;">
                            <el-option v-for="(item,index) in datalist.pitch_list" :key="index"  :label="item.title" :value="item.maid">
                            </el-option>
                       </el-select>   
                    </el-form-item> 

                    <el-form-item :label="item.title" v-for="(item,index) in datalist.pitch_list" :key="index" >
                        <el-input v-model.number="item.number" placeholder="必填" :disabled="item.type" @input="change_input($event)"></el-input>
                    </el-form-item>

                  <div style="text-align: center;width:50%;margin:auto;">
                    <el-button type="primary" style="width:80%;" @click="sub_but">确认</el-button>
                </div>
                    
                </el-form>


                

            </div> 
        </el-dialog>


     
     <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"  
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>
      
  </div>
</template>

<script>
import ManorFpList from '@/view/Member/ManorFpList'
export default {
  name: 'manorfp',
  data () {
    return {
      data:[{"name":"aaaaa"}],
      page:1,
      count:0,
      add_fp_mtk:false,
      datalist:{
            all:0,
            pitch:[],
            pitch_list:[],

      }
      
    }
  },
 components:{
    ManorFpList
  },
  created(){
    this.list()
  },
  mounted (){
    
  },
  methods: {
      list(){
      this.post("/goods/manorOption", {

       }).then(res => { 
          this.datalist.pitch_list = res.result              

          for(let b of this.datalist.pitch_list) {                    
              b.type = true  //默认禁用 
              b.number = 0    //默认禁用input为0            
          }               
           console.log(res)               
       })
    },
       select_change(val){       
        //console.log(val)
        for(let b of this.datalist.pitch_list) { //默认禁用                       
            b.type = true                                       
        } 
        for(let a of this.datalist.pitch){             
            for(let b of this.datalist.pitch_list) {                
                  if(a == b.maid ){ //判断是否包含maid  包含开启输入
                    b.type = false
                  }                        
            } 
        } 
        for(let b of this.datalist.pitch_list) {                           
            if(b.type == true ){  //禁用的input为0
                b.number = 0
            }                                      
        }   

    },
    change_input(e){  //防止input输入不进去
         this.$forceUpdate()
    },
    sub_but(){
        let all_number = 0
         for(let b of this.datalist.pitch_list) { //默认禁用                       
            all_number +=  parseInt(b.number)   
            console.log(b.number)                             
         } 
         
         console.log(all_number)
         if(this.datalist.all != all_number){
               this.open1('分配总价值不等','warning')
         }

         
    },
    add_fp_but(){
        this.add_fp_mtk = true
    },
    goBack() {
        this.$router.go(-1)
    },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
        this.page = val
        console.log(`当前页: ${val}`);
      }
  }
}
</script>


<style scoped>


</style>
